import { creatCustomerAddress, updateCustomerAddress } from "@/services/customer/custom_address_api";
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea
} from "@ant-design/pro-components";
import dayjs from 'dayjs';
import { message } from "antd";
import React, { useState, useEffect } from "react";
import { useIntl } from "umi";
import { CustomerAddressVo } from "../../constants"



interface CreateModalProps {
  visible: boolean;
  values?: CustomerAddressVo;
  onCancel: () => void;
  onSuccess: () => void;
}
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const AddForm: React.FC<CreateModalProps> = ({
  visible,
  values,
  onCancel,
  onSuccess,
}) => {
  const [form] = ProForm.useForm<CustomerAddressVo>();
  const intl = useIntl();
  const [validPeriodDateFor, setValidPeriodDateFor] = useState<string>('');
  const [validPeriodDateTo, setValidPeriodDateTo] = useState<string>('');
  // const [updateStatus, setUpdateStatus] = useState<boolean>(false);
  const [editStatus, setEditStatus] = useState<boolean>(false);


  useEffect(() => {
    if (visible) {   
      if(values){
        console.log("address:"+JSON.stringify(values));
        setEditStatus(true);
      } 
      form.setFieldsValue(values || {});
    }
  }, [visible, values]);


  const handleSubmit = async (formValues: CustomerAddressVo) => {
    //  console.log("customer1:" + JSON.stringify(values));
    if (values?.id) {
      formValues.id=values?.id;
      formValues.customerId = values?.customerId;
      formValues.customerCode = values?.customerCode;
      return await handleUpdateCustomer(formValues);
    }
    try {
      // API调用逻辑
      const response = await creatCustomerAddress(formValues);

      if (response.code != 0) {
        if (!response.msg) {
          throw new Error(intl.formatMessage({ id: "request.error.operating" }));
        } else {
          // throw new Error(response.msg);
          message.error(response.msg);
          return false;
        }
      }
      message.success(intl.formatMessage({ id: "request.success.operating" }));
      onSuccess();
      form.resetFields();
      return true;
    } catch (error) {
      message.error(intl.formatMessage({ id: "request.error.retry" }));
      return false;
    }
  };

  const handleUpdateCustomer = async (updateData: CustomerAddressVo) => {
    try {
      // API调用逻辑

      const response = await updateCustomerAddress(updateData.id,updateData);

      if (response.code != 0) {
        if (!response.msg) {
          throw new Error(intl.formatMessage({ id: "request.error.operating" }));
        } else {
          // throw new Error(response.msg);
          message.error(response.msg);
          return false;
        }
      }
      message.success(intl.formatMessage({ id: "request.success.operating" }));
      onSuccess();
      form.resetFields();
      return true;
    } catch (error) {
      message.error(intl.formatMessage({ id: "request.error.retry" }));
      return false;
    }
  }

  const handleValuesChange = (changedValues, allValues) => {
    // changedValues 是发生变化的字段
    // allValues 是表单当前所有的值
    // console.log(changedValues);
  };

   const closeModel = ()=>{
    form.resetFields;
    onCancel();
  }

  return (
    <ModalForm<CustomerAddressVo>
  title={values?.id
    ? intl.formatMessage({ id: 'pages.edit' })
    : intl.formatMessage({ id: 'pages.create' })}
  width="40%"
  form={form}
  open={visible}
  onOpenChange={(visible) => !visible && closeModel()}
  onFinish={handleSubmit}
  onValuesChange={handleValuesChange}
  autoFocusFirstInput
  modalProps={{
    destroyOnClose: true,
    maskClosable: false,
  }}
  submitter={{
    searchConfig: {
      submitText: intl.formatMessage({ id: "pages.button.submit" }),
      resetText: intl.formatMessage({ id: "pages.button.cancel" }),
    },
  }}
  layout="horizontal"
  {...formItemLayout}
>
  <ProFormText
    name="sn"
    colProps={{ md: 12, xl: 8 }}
    label={intl.formatMessage({
      id: "pages.customer.address.sn"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.sn.placeholder"
    })}
    disabled={editStatus}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.sn.required" }) }]}
  />

  <ProFormText
    name="shipperName"
    colProps={{ md: 12, xl: 8 }}
    label={intl.formatMessage({
      id: "pages.customer.address.shipperName"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.shipperName.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.shipperName.required" }) }]}
  />

  <ProFormText
    name="country"
    label={intl.formatMessage({
      id: "pages.customer.address.country"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.country.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.country.required" }) }]}
  />
  
  <ProFormText
    name="state"
    label={intl.formatMessage({
      id: "pages.customer.address.state"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.state.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.state.required" }) }]}
  />
  
  <ProFormText
    name="city"
    label={intl.formatMessage({
      id: "pages.customer.address.city"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.city.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.city.required" }) }]}
  />
  
  <ProFormText
    name="postcode"
    label={intl.formatMessage({
      id: "pages.customer.address.postcode"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.postcode.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.postcode.required" }) }]}
  />
  
  <ProFormText
    name="telephone"
    label={intl.formatMessage({
      id: "pages.customer.address.telephone"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.telephone.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.telephone.required" }) }]}
  />
  
  <ProFormText
    name="company"
    label={intl.formatMessage({
      id: "pages.customer.address.company"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.company.placeholder"
    })}
  />
  
  <ProFormText
    name="doorplate"
    label={intl.formatMessage({
      id: "pages.customer.address.doorplate"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.doorplate.placeholder"
    })}
  />
  
  <ProFormTextArea
    name="streetAddress1"
    label={intl.formatMessage({
      id: "pages.customer.address.streetAddress1"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.streetAddress1.placeholder"
    })}
    rules={[{ required: true, message: intl.formatMessage({ id: "pages.customer.address.streetAddress1.required" }) }]}
  />
  
  <ProFormTextArea
    name="streetAddress2"
    label={intl.formatMessage({
      id: "pages.customer.address.streetAddress2"
    })}
    placeholder={intl.formatMessage({
      id: "pages.customer.address.streetAddress2.placeholder"
    })}
  />
</ModalForm>
  );
};

export default AddForm;
